<template>
  <div class="common-container">
    <head-title :title="title" />

    <div class="header-wrap center-box">
      <div class="common-search ym-box">
        <search-form :form="searchForm" :center-options="state.centerOptions" @search="search" />
      </div>
    </div>

    <div class="table-wrap ym-box center-box">
      <div :style="{ height: tableHeight + 'px' }">
        <filter-wrap
          v-model:status-code="searchForm.issuesStatus"
          :status-data="issuesStatus"
          @search="search"
        />
        <div v-loading="tableLoading" class="table-body">
          <div class="issues-list">
            <div v-for="issue in tableData" :key="issue.isuId" class="issues-item">
              <div class="issues-info">
                <div>
                  <router-link
                    :to="`${path}/detail?pid=${pid}&pname=${pname}&isuId=${issue.vid}`"
                    class="issues-title"
                  >
                    <span class="issues-title__content">{{ issue.name }}</span>
                  </router-link>
                </div>
                <el-row class="issues-desc" :gutter="10">
                  <el-col :span="6">
                    <span>{{ issue.statusValue }}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>访视时间：</span>
                    <span class="issues-info__content">{{ issue.visitTime }}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>受试者：</span>
                    <span class="issues-info__content">{{ issue?.subject?.sic }}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>研究中心：</span>
                    <span class="issues-info__content">{{ issue.centre }}</span>
                  </el-col>
                </el-row>
                <!-- <el-row class="issues-desc" :gutter="10">
                  <el-col :span="4">
                    <span>{{ issue.statusValue }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>访视：</span>
                    <span class="issues-info__content">{{ issue.name }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>研究中心：</span>
                    <span class="issues-info__content">{{ issue.centre }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>受试者：</span>
                    <span class="issues-info__content">{{ issue?.subject?.sic }}</span>
                  </el-col>
                </el-row>-->
              </div>
            </div>
          </div>
        </div>
      </div>

      <pagination
        v-model:currentPage="pageObj.pageNum"
        :page-size="pageObj.pageSize"
        :total="pageObj.total"
        @pagination="search"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'

import FilterWrap from './components/FilterWrap.vue'
import SearchForm from './components/SearchForm.vue'
import HeadTitle from '@/components/HeaderTitle/index.vue'
import { Pagination, usePage } from '@/components/Pagination/index'

import { getOrgClsListByPid, orgType } from '@/api/common'
import VisitApi from '@/api/visit'

import { useTable } from '@/utils/common/useTable'

import IBaseObj from '#/index'

const route = useRoute()
// const router = useRouter()
const { path } = route
const { pid, pname }: IBaseObj = route.query
defineProps({
  title: {
    type: String,
    default: '质疑处理',
  },
})

const pageObj = reactive({ ...usePage() })
const { tableHeight } = useTable()
const state: IBaseObj = reactive({
  tableData: [],
  tableLoading: false,
  issuesStatus: [],
  centerOptions: [],
})
const { tableData, tableLoading, issuesStatus } = toRefs(state)

/* search start */

const searchForm = reactive({
  title: '',
  issuesStatus: 0,
})

// 获取状态
const getStatusData = async () => {
  const ret = await VisitApi.getIssuesStatus({
    pid,
    issues: 1,
  })

  state.issuesStatus = ret || []
  search()
}

const search = async () => {
  tableLoading.value = true
  try {
    const ret = await VisitApi.getVisitByPage({
      ...searchForm,
      pageSize: pageObj.pageSize,
      pageNum: pageObj.pageNum,
      issues: 1,
      pid,
    })
    const { records, total }: any = ret
    state.tableData = records || []
    pageObj.total = total || 0
  } finally {
    tableLoading.value = false
  }
}

const getCenterOptions = async () => {
  const ret = await getOrgClsListByPid(pid, orgType.yjdw)
  state.centerOptions = ret.data
}

/* search end */

const init = () => {
  getCenterOptions()
  getStatusData()
}
init()
</script>

<style lang="scss" scoped>
.issues {
  &-desc,
  &-time {
    color: var(--color-2);
  }

  &-desc {
    display: flex;
    margin-top: 10px;
  }

  &-item {
    padding: 10px 6px;
    border-bottom: 1px solid var(--table-border);

    &:hover {
      background: #fafafb;
    }
  }

  &-title {
    &__content {
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;

      &:hover {
        color: var(--color-primary);
      }
    }
  }

  &-info {
    &__content {
      font-size: 16px;
    }
  }
}

.table {
  &-body {
    height: calc(100% - 41px);
    overflow: auto;
    @include scroll-bar;
  }
}
</style>
